<template>
  <div class="account-selector">
    <el-select v-model="currentAccount" placeholder="选择账户" style="width: 100%">
      <el-option
        v-for="(address, name) in filteredAccounts"
        :key="name"
        :label="`${name} (${address.substring(0, 8)}...)`"
        :value="name">
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { BLOCKED_ACCOUNTS } from '@/utils/api'

export default {
  name: 'AccountSelector',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState(['accounts']),
    
    // 过滤掉特定账户
    filteredAccounts() {
      const filtered = {...this.accounts};
      // 遍历屏蔽账户列表，删除所有被屏蔽的账户
      BLOCKED_ACCOUNTS.forEach(address => {
        delete filtered[address];
      });
      return filtered;
    },
    
    currentAccount: {
      get() {
        // 优先使用组件传入的值，如果没有则使用Vuex中的全局值
        return this.value || this.$store.state.selectedAccount
      },
      set(value) {
        // 双向绑定支持
        this.$emit('input', value)
        // 更新全局选中账户
        this.$store.commit('setSelectedAccount', value)
        
        console.log('已切换账户:', value)
      }
    }
  },
  created() {
    // 确保账户数据已加载
    if (Object.keys(this.accounts).length === 0) {
      this.$store.dispatch('fetchAccounts')
    }
  }
}
</script>

<style scoped>
.account-selector {
  margin-bottom: 20px;
}
</style> 